<template>
  <header class="header-view shadow-lg sticky top-0 z-10 bg-weather">
    <nav
      class="containe mx-auto px-40 text-white flex items-center justify-center gap-4 py-6 sm:flex-row flex-col"
    >
      <div class="title flex gap-3 items-center">
        <i class="fa-solid fa-sun text-2xl"></i>
        <p class="text-2xl">新中地天气</p>
      </div>
      <div class="location flex gap-4 items-center">
        <p class="text-lg">{{ localcity.city }}</p>
        <p class="text-sm">
          实时天气：{{ localweather.weather }} {{ localweather.temperature }}℃
        </p>
        <p class="text-sm">
          {{ localweather.winddirection }}风 {{ localweather.windpower }}级
        </p>
      </div>
      <div class="flex gap-3 justify-end flex-1 text-xl">
        <i
          class="fa-solid fa-circle-info hover:text-cyan-900 cursor-pointer duration-1000"
          @click="isshow = true"
        ></i>
        <slot name="add"></slot>
      </div>
    </nav>
    <transition name="fade">
      <div
        class="info-box fixed z-20 w-full bg-black bg-opacity-30 h-screen top-0 left-0 flex justify-center px-8 text-black"
        v-if="isshow"
      >
        <div class="p-4 bg-white self-start mt-32 ml-32 max-w-screen-md">
          <h2>关于:</h2>
          <p>这个应用可以用来追踪你选择城市的当前天气</p>
          <br />
          <h2>如何使用:</h2>
          <p>1. 点击搜索框输入你希望追踪的城市</p>
          <p>2. 在搜索结果中选中一个城市，你将获取当地最新的天气</p>
          <p>3.点击右侧的＋号可以将追踪城市的天气情况保存在首页</p>
          <br />
          <h2>移除城市:</h2>
          <p>如果你不想在首页关注某个城市,可以通过底部的按钮删除它</p>
          <button
            @click="isshow = false"
            class="text-white py-2 px-6 text-xs"
            style="background-color: #00668a"
          >
            关闭
          </button>
        </div>
      </div>
    </transition>
  </header>
</template>
<script>
import { useLocalStore } from "../stores/index";
import { mapState, mapActions } from "pinia";
export default {
  data() {
    return {
      isshow: false,
    };
  },
  computed: {
    ...mapState(useLocalStore, ["localcity", "localweather"]),
  },
  // 用来获取pinia的actions
  methods: {
    ...mapActions(useLocalStore, ["getLocalInfo"]),
  },
  mounted() {
    this.getLocalInfo();
  },
};
</script>
<style scoped lang="scss">
.fade-enter-active,
.fade-leave-active {
  transition: opacity 1s;
}
.fade-enter,
.fade-leave-to {
  opacity: 0;
}
.header-view {
  position: relative;
  .info-box {
    h2 {
      font-size: 16px;
    }
    p {
      font-size: 12px;
    }
  }
}
</style>
